import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { DownOutlined, UpOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Modal,
  Input,
  Row,
  Col,
  Radio,
  message,
  DatePicker,
  Menu,
  Dropdown,
  Divider,
  Progress,
  Table,
  // Alert,
  Badge,
} from 'antd';
import router from 'umi/router';
import queryString from 'query-string';
import downloadFile, { matchDict } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import styles2 from '@/utils/utils.less';
import StandardTable from '@/components/StandardTable';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import styles from '../SocialBill/style.less';
import DictCode from '../../components/DictCode';
import Area from '../../components/Area';
import CreateBillModal from '../SocialBill/CreateBillModal';

const FormItem = Form.Item;
const { RangePicker, MonthPicker } = DatePicker;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@connect(({ providentfundhadpay, loading }) => ({
  providentfundhadpay,
  loading: loading.effects['providentfundhadpay/getProgress']
    ? false
    : loading.models.providentfundhadpay,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {
    mvisible: false, // 回盘导入弹框显隐
    mvisible12: false, // 账单下载弹框显隐
    markPaidFlag: false, // 标记以支付
    confirmLoading: false,
    footerVisible: false,
    selectedRows: [],
    selectedKeys: [],
    // progressVisible: false,
  };

  componentDidMount() {
    const { location } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.bascidict();
    }
    this.checkHasTask();
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const { interval } = this.state;
    clearInterval(interval);
    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: {
        progressPercent: 0,
      },
    });
  }

  getList = (nowPage = 1, pageNum = 10, isClear = true) => {
    const { form, dispatch } = this.props;
    if (isClear) {
      this.setState({
        selectedRows: [],
        selectedKeys: [],
      });
    }
    form.validateFields(
      ['billMonth', 'payType', 'declAreaId', 'accuAccoName', 'rtnState', 'payState'],
      (err, fieldsValue) => {
        dispatch({
          type: 'providentfundhadpay/updateModelData',
          payload: { formFieldsValue: fieldsValue },
        });
        if (err) return;
        const tempFields = {};
        Object.keys(fieldsValue).forEach(item => {
          if (item === 'billMonth' && fieldsValue[item]) {
            tempFields.queryStartTime = moment(fieldsValue.billMonth[0]).format('YYYYMM');
            tempFields.queryEndTime = fieldsValue.billMonth[1] ? moment(fieldsValue.billMonth[1]).format('YYYYMM') : '';
            delete tempFields.billMonth;
          } else if (fieldsValue[item] && fieldsValue[item].key) {
            tempFields[item] =
            fieldsValue[item].key === undefined || fieldsValue[item].key === null
              ? null
              : fieldsValue[item].key;
          } else {
            tempFields[item] =
            fieldsValue[item] === undefined || fieldsValue[item] === null
              ? null
              : fieldsValue[item].trim();
          }
        });
        const pageArg = {
          currentPage: nowPage,
          pageSize: pageNum,
        };
        const params = { pageArg, ...tempFields };
        dispatch({
          type: 'providentfundhadpay/fetchList',
          payload: params,
        });
      }
    );
  };

  checkHasTask = () => {
    const { dispatch } = this.props;
    // 查看当前有无任务进行
    dispatch({
      type: 'providentfundhadpay/checkHasTask',
    });
  };

  handleStandardTableChange = pagination => {
    this.getList(pagination.current, pagination.pageSize, false);
  };

  handleSelectRows = (selectedRows, selectedKeys) => {
    this.setState({ selectedRows, selectedKeys });
  };

  getDate = () => {
    const nowDate = moment(new Date()).format('YYYYMM');
    const d = new Date();
    d.setMonth(d.getMonth() + 1);
    const yy1 = d.getFullYear();
    let mm1 = d.getMonth() + 1; // 因为getMonth（）返回值是 0（一月） 到 11（十二月） 之间的一个整数。所以要给其加1
    if (mm1 < 10) {
      mm1 = `0${mm1}`;
    }
    const nextDate = `${yy1}${mm1}`;
    const arr = [];
    arr.push(nowDate);
    arr.push(nextDate);
  };

  // 生成账单   接口要改
  createBill = () => {
    const {
      providentfundhadpay: { isHasTask },
    } = this.props;
    if (isHasTask) {
      message.warning('您有账单正在进行生成或更新，请等待完成后再操作');
      return;
    }
    this.setState({
      billModalVisible: true,
      // billType: 1,
    });
  };

  handleBillOk = values => {
    const {
      dispatch,
      providentfundhadpay: {
        pageData: { pagination },
      },
    } = this.props;
    this.setState({
      confirmLoading: true,
    });
    dispatch({
      type: 'providentfundhadpay/handleBillOk',
      payload: values,
    }).then(res => {
      if (res.success) {
        this.setState({
          billModalVisible: false,
          footerVisible: false,
        });
        message.success('账单生成成功！');
        this.getList(pagination.current, pagination.pageSize);
      } else {
        message.warning(res.message || '账单生成失败！');
      }
      this.setState({
        confirmLoading: false,
      });
    });
  };

  // // 查看生成账单进度
  // openProgress = () => {
  //   this.setState({
  //     progressVisible: true,
  //   });
  // };

  handleBillCancel = () => {
    this.setState({
      billModalVisible: false,
    });
  };

  // 字典
  bascidict = () => {
    const {
      dispatch,
      providentfundhadpay: {
        pageData: { pagination },
      },
    } = this.props;
    dispatch({
      type: 'providentfundhadpay/queryDictItemsByCodes',
      payload: ['RTN_STATE', 'PAY_STATE', 'PAY_FEES_WAY'],
    }).then(res => {
      if (res.success) {
        this.getList(pagination.current, pagination.pageSize);
      }
    });
  };

  toggleForm = () => {
    const {
      dispatch,
      providentfundhadpay: { expandForm },
    } = this.props;
    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 查询
  goSearch = () => {
    const {
      providentfundhadpay: {
        pageData: { pagination },
      },
    } = this.props;
    this.getList(1, pagination.pageSize);
  };

  reset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  showMarkPaid = () => {
    const { selectedRows } = this.state;
    const { dispatch } = this.props;
    if (selectedRows.length === 0) {
      message.warning('请至少选择一项！');
      return;
    }
    const flag = selectedRows.every(
      item => Number(item.rtnState) === 3 && item.payState !== '已支付'
    );
    if (!flag) {
      Modal.warning({
        title: '标记已支付',
        content: (
          <div>
            当前选择的账单存在<span className="emphasize-text">未回盘或已回盘已支付的账单</span>
            ，只有
            <span className="emphasize-text">已回盘未支付</span>
            的账单，可标记已支付
          </div>
        ),
        okText: '关闭',
        okType: 'default',
        autoFocusButton: 'cancel',
      });
      return;
    }
    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: {
        paidData: selectedRows,
      },
    });
    this.setState({
      markPaidFlag: true,
    });
  };

  closeMarkPaidFlag = () => {
    this.setState({
      markPaidFlag: false,
    });
  };

  // 标记已支付
  markPaid = () => {
    const {
      form,
      dispatch,
      providentfundhadpay: {
        pageData: { pagination },
      },
    } = this.props;
    form.validateFields(['remarkList'], (err, values) => {
      if (err) return;
      const arr = Object.entries(values.remarkList).map(([, value]) => value);
      dispatch({
        type: 'providentfundhadpay/markPaid',
        payload: arr,
      }).then(res => {
        if (res.success) {
          message.success('操作成功！');
          this.getList(pagination.current, pagination.pageSize);
          this.setState({
            markPaidFlag: false,
          });
        } else {
          this.setState({
            markPaidFlag: false,
          });
          message.warning(res.message || '服务端错误');
        }
      });
    });
  };

  // 翻译字典
  getDicName = (dicList, text) => {
    let newText = '';
    const arr = [];
    if (text) {
      text.split(',').forEach(item => {
        dicList.forEach(value => {
          if (Number(value.itemCode) === Number(item)) {
            arr.push(value.itemName);
          }
        });
      });
      newText = arr.join(',');
    }
    return newText;
  };

  afterClose = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: {
        progressPercent: 0,
      },
    });
  };

  // 公积金回盘导入 显示弹框
  showModelrate = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'providentfundhadpay/checkRtnState',
      payload: {
        accuAcco: record.accuAcco,
        billYm: record.billYm,
      },
    }).then(res => {
      if (res.success) {
        router.push(
          `/billmanagement/providentfundhadpay/progressfund?accuAcco=${record.accuAcco}&payType=${
            record.payType
          }&billId=${record.billId}&current=0&assType=2`
        );
        return;
      }
      message.warning(res.message || '服务端错误');
    });
  };

  // 公积金账单下载 显示弹框
  showModel12 = () => {
    const { selectedRows } = this.state;
    if (selectedRows && selectedRows.length >= 1) {
      this.setState({ mvisible12: true });
    } else {
      message.warning('请至少选择一项!');
    }
  };

  // 社保实缴账单合并预览 显示弹框
  showModel14 = () => {
    const { selectedRows } = this.state;
    if (selectedRows && selectedRows.length >= 1) {
      this.setState({ mvisible14: true });
    } else {
      message.warning('请至少选择一项!');
    }
  };

  // // 关闭进度条
  // closeModal = () => {
  //   const {
  //     dispatch,
  //     providentfundhadpay: {
  //       pageData: { pagination },
  //       isFirstClose,
  //     },
  //   } = this.props;
  //   // 如果是第一次关闭，则调用查询接口
  //   if (isFirstClose) {
  //     this.getList(pagination.current, pagination.pageSize);
  //   }
  //   dispatch({
  //     type: 'providentfundhadpay/updateModelData',
  //     payload: {
  //       isFirstClose: false,
  //       progressPercent: 0,
  //     },
  //   });
  //   const { interval } = this.state;
  //   clearInterval(interval);
  //   this.setState({
  //     progressVisible: false,
  //   });
  //   this.checkHasTask();
  // };

  // // 获取进度
  // getProgress = ({ batchNo, billType }) => {
  //   const {
  //     dispatch,
  //     providentfundhadpay: {
  //       pageData: { pagination },
  //     },
  //   } = this.props;
  //   let reqFlag = true;
  //   this.setState({
  //     interval: setInterval(() => {
  //       dispatch({
  //         type: 'providentfundhadpay/getProgress',
  //         payload: { batchNo },
  //       }).then(res => {
  //         if (res.data && res.data.successProp === 100) {
  //           const { interval } = this.state;
  //           clearInterval(interval);
  //           setTimeout(() => {
  //             dispatch({
  //               type: 'providentfundhadpay/updateModelData',
  //               payload: {
  //                 progressPercent: 0,
  //               },
  //             });
  //             if (billType === 1) {
  //               message.success('账单生成成功！');
  //             } else {
  //               message.success('账单更新成功！');
  //             }
  //             if (reqFlag) {
  //               reqFlag = false;
  //               this.setState({
  //                 progressVisible: false,
  //               });
  //               this.checkHasTask();
  //               this.getList(pagination.current, pagination.pageSize);
  //             }
  //           }, 2000);
  //         } else if (!res.success) {
  //           const { interval } = this.state;
  //           clearInterval(interval);
  //         }
  //       });
  //     }, 2000),
  //   });
  // };

  onMonthChanges = value => {
    const { form } = this.props;
    form.setFieldsValue({
      billMonth: value,
    });
  };

  // 更新账单
  updateBill = () => {
    const {
      dispatch,
      providentfundhadpay: { isHasTask },
    } = this.props;
    const { selectedKeys } = this.state;
    if (isHasTask) {
      message.warning('您有账单正在进行生成或更新，请等待完成后再操作');
      return;
    }
    if (selectedKeys && selectedKeys.length >= 1) {
      Modal.confirm({
        title: `你确定要更新账单吗？`,
        icon: <ExclamationCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'providentfundhadpay/updateBill',
            payload: {
              billIdArr: selectedKeys,
            },
          });
        },
      });
    } else {
      message.warning('请至少选择一项!');
    }
  };

  // viewTaskProgress = () => {
  //   const {
  //     providentfundhadpay: { batchNo, isUpdate },
  //   } = this.props;
  //   this.setState({
  //     billType: isUpdate === 1 ? 2 : 1,
  //     progressVisible: true,
  //   });
  //   this.getProgress({ batchNo, billType: isUpdate === 1 ? 2 : 1 });
  // };

  getTotalPrice = () => {
    let total = 0;
    const { selectedRows } = this.state;
    selectedRows.forEach(value => {
      total += value.payAmo ? value.payAmo : 0;
    });
    return total;
  };

  renderOper = record => {
    if (Number(record.isCreating) === 1) {
      return (
        <span style={{ color: '#FAAD14' }} onClick={this.openProgress}>
          生成账单中．．．
        </span>
      );
    }
    switch (Number(record.rtnState)) {
      case 1:
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/billmanagement/providentfundhadpay/billDetail?id=${record.billId}&rtnState=${
                    record.rtnState
                  }&corpId=${record.corpId}`
                );
              }}
            >
              {' '}
              查看
            </span>
            <Divider type="vertical" />
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.showModelrate(record)}
            >
              {' '}
              回盘导入
            </span>
          </div>
        );

      case 2:
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/billmanagement/providentfundhadpay/billDetail?id=${record.billId}&rtnState=${
                    record.rtnState
                  }&corpId=${record.corpId}`
                );
              }}
            >
              {' '}
              查看
            </span>
            <Divider type="vertical" />
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/billmanagement/providentfundhadpay/progressfund?accuAcco=${
                    record.accuAcco
                  }&payType=${record.payType}&billId=${record.billId}&current=1&assType=2`
                );
              }}
            >
              处理差异
            </span>
          </div>
        );

      case 3:
        return (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/billmanagement/providentfundhadpay/billDetail?id=${record.billId}&rtnState=${
                    record.rtnState
                  }&corpId=${record.corpId}`
                );
              }}
            >
              {' '}
              查看
            </span>
          </div>
        );
      default:
        return <div />;
    }
  };

  downFileArr = () => {
    const { selectedRows } = this.state;
    const inParam = selectedRows.map(item => ({
      billId: item.billId,
      rtnState: item.rtnState,
    }));

    downloadFile(inParam, '/osApi/accuBillApi/execMergeDownload', 'POST');
    this.setState({
      mvisible14: false,
      selectedKeys: [],
      selectedRows: [],
    });
  };

  nextClick = () => {
    this.setState({ footerVisible: true });
  };

  handleBillCancel = () => {
    this.setState({
      billModalVisible: false,
      footerVisible: false,
    });
  };

  downFile = () => {
    const { selectedRows } = this.state;
    const inParam = selectedRows.map(item => ({
      rtnState: item.rtnState,
      billId: item.billId,
    }));
    downloadFile(inParam, '/osApi/accuBillApi/execDownload', 'POST');
    this.setState({
      mvisible12: false,
      selectedKeys: [],
      selectedRows: [],
    });
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: { formFieldsValue: {} },
    });
    form.setFieldsValue({
      billMonth: null,
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    await this.resetSearch();
    await this.bascidict();

    dispatch({
      type: 'providentfundhadpay/updateModelData',
      payload: { expandForm: Boolean(queryParam) },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const {
      footerVisible,
      selectedKeys,
      selectedRows,
      mvisible,
      mvisible12,
      mvisible14,
      // progressVisible,
      // billType,
      markPaidFlag,

      billModalVisible,
      confirmLoading,
    } = this.state;
    const {
      loading,
      form: { getFieldDecorator },
      providentfundhadpay: {
        expandForm,
        rtnState,
        payFeesWay,
        pageData,
        progressPercent,
        paidData,
        formFieldsValue,
        stateMap,
        showProgress,
        // isHasTask,
      },
    } = this.props;
    // 公积金表格
    const columns1 = [
      {
        title: '账单年月',
        dataIndex: 'billYm',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '缴费方式',
        dataIndex: 'payType',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <span>{matchDict(payFeesWay, text)}</span>,
      },
      {
        title: '执行地',
        dataIndex: 'declAreaName',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => text || '--',
      },
      {
        title: '账户名称',
        dataIndex: 'accuAccoName',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },

      {
        title: '回盘状态',
        dataIndex: 'rtnState',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <Badge
            key={record.rtnState}
            status={stateMap[record.rtnState]}
            text={matchDict(rtnState, text)}
          />
        ),
      },
      {
        title: '账单金额',
        dataIndex: 'payAmo',
        align: 'right',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'right' } }),
      },
      {
        title: '涉及人数',
        dataIndex: 'perNum',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '支付状态',
        dataIndex: 'payState',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        align: 'center',
        width: 200,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: (text, record) => this.renderOper(record),
      },
    ];

    const columnsPaid = [
      {
        title: '账户名称',
        dataIndex: 'accuAccoName',
        width: 200,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <div className={styles.ellipsis}>{text}</div>,
      },
      {
        title: '账单年月',
        dataIndex: 'billYm',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '金额',
        dataIndex: 'payAmo',
        align: 'right',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'right' } }),
      },
      {
        title: '备注',
        dataIndex: 'n11',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <Fragment>
            <FormItem style={{ margin: 0, width: '100%' }}>
              {getFieldDecorator(`remarkList[${record.billId}][payRemark]`, {})(
                <Input style={{ width: '100%' }} />
              )}
            </FormItem>
            <FormItem style={{ display: 'none' }}>
              {getFieldDecorator(`remarkList[${record.billId}][billId]`, {
                initialValue: record.billId,
              })(<Input style={{ width: '100%' }} />)}
            </FormItem>
          </Fragment>
        ),
      },
    ];

    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
    // 公积金回盘导入弹框
    const formItemLayout2 = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };

    const ModelLayout = {
      title: '公积金回盘导入',
      visible: mvisible,
      footer: null,
      onCancel: () => {
        this.setState({ mvisible: false });
      },
    };

    const ModelLayout12 = {
      title: '公积金账单下载',
      visible: mvisible12,
      footer: null,
      onCancel: () => {
        this.setState({ mvisible12: false });
      },
    };

    const ModelLayout14 = {
      title: '合并预览',
      visible: mvisible14,
      footer: null,
      onCancel: () => {
        this.setState({ mvisible14: false });
      },
    };
    const moreMenu = () => (
      <Menu>
        {checkPermissions('os:accuBillApi:updateBill') && (
          <Menu.Item onClick={this.updateBill}>更新账单</Menu.Item>
        )}

        <Menu.Item onClick={this.showMarkPaid}>标记已支付</Menu.Item>
      </Menu>
    );

    const renderAdvancedForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="账单年月">
              {getFieldDecorator('billMonth', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.billMonth,
              })(
                <RangePicker
                  placeholder={['开始年月', '结束年月']}
                  format="YYYY-MM"
                  mode={['month', 'month']}
                  style={{ width: '100%' }}
                  onPanelChange={this.onMonthChanges}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="缴费方式">
              {getFieldDecorator('payType', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.payType,
              })(
                <DictCode
                  dictType="PAY_FEES_WAY"
                  allowClear
                  showSearch
                  optionFilterProp="children"
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="执行地">
              {getFieldDecorator('declAreaId', {
                initialValue: formFieldsValue.declAreaId,
              })(<Area allowClear showSearch optionFilterProp="children" labelInValue />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="账户名称">
              {getFieldDecorator('accuAccoName', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.accuAccoName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="回盘状态">
              {getFieldDecorator('rtnState', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.rtnState,
              })(
                <DictCode dictType="RTN_STATE" allowClear showSearch optionFilterProp="children" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="支付状态">
              {getFieldDecorator('payState', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.payState,
              })(
                <DictCode dictType="PAY_STATE" allowClear showSearch optionFilterProp="children" />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={6} sm={24} offset={18}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: '24px' }}>
                <Button type="primary" onClick={this.goSearch}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
    const renderSimpleForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="账单年月">
              {getFieldDecorator('billMonth', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.billMonth,
              })(
                <RangePicker
                  placeholder={['开始年月', '结束年月']}
                  format="YYYY-MM"
                  mode={['month', 'month']}
                  style={{ width: '100%' }}
                  onPanelChange={this.onMonthChanges}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="缴费方式">
              {getFieldDecorator('payType', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.payType,
              })(
                <DictCode
                  dictType="PAY_FEES_WAY"
                  allowClear
                  showSearch
                  optionFilterProp="children"
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles2.submitButtons}>
              <Button type="primary" onClick={this.goSearch}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
    const renderForm = expandForm ? renderAdvancedForm : renderSimpleForm;
    return (
      <div>
        <PageHeaderWrapper>
          <Card className={styles2.searchCard}>
            <div className={styles2.tableListForm}>{renderForm}</div>
          </Card>

          <Card className={styles2.tabCard}>
            <div style={{ margin: '12px 0 16px' }}>
              <Authorized authority="os:accuBillApi:createBill" noMatch={null}>
                <Button type="primary" style={{ marginRight: 8 }} onClick={this.createBill}>
                  生成账单
                </Button>
              </Authorized>
              <Authorized authority="os:accuBillApi:execDownload" noMatch={null}>
                <Button style={{ marginRight: 8 }} onClick={this.showModel12}>
                  账单下载
                </Button>
              </Authorized>
              {checkPermissions('os:accuBillApi:updateBill') ? (
                <Dropdown overlay={moreMenu}>
                  <Button style={{ marginRight: 8 }}>
                    更多
                    <DownOutlined />
                  </Button>
                </Dropdown>
              ) : (
                <Button style={{ marginRight: 8 }} onClick={this.showMarkPaid}>
                  标记已支付
                </Button>
              )}
            </div>
            {/* {isHasTask ? (
              <Alert
                style={{ margin: '16px 0 15px 0' }}
                message={
                  <span>
                    您有正在生成账单或更新账单的任务
                    <a style={{ marginLeft: 20 }} onClick={() => this.viewTaskProgress()}>
                      查看
                    </a>
                  </span>
                }
                type="warning"
                showIcon
              />
            ) : null} */}
            <StandardTable
              selectedRows={selectedRows}
              selectedRowKeys={selectedKeys}
              loading={loading}
              data={pageData}
              columns={columns1}
              rowKey="billId"
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            />
          </Card>

          {/* 公积金回盘导入弹框   */}
          <Modal {...ModelLayout}>
            <Form>
              <Row style={{ height: '40px' }}>
                <FormItem {...formItemLayout2} label="类型选择">
                  <RadioGroup onChange={this.onChange} defaultValue="a" size="small">
                    <RadioButton value="a">五险合一</RadioButton>
                    <RadioButton value="b">五险分选</RadioButton>
                  </RadioGroup>
                </FormItem>
              </Row>
              <Row style={{ height: '60px' }}>
                <FormItem {...formItemLayout2} label="实缴时间">
                  <MonthPicker
                    size="small"
                    defaultValue={moment('2015-01', 'YYYY-MM')}
                    format="YYYY-MM"
                    placeholder="请选择"
                  />
                </FormItem>
              </Row>
              <Row style={{ height: '60px' }}>
                <Button size="small" type="primary" style={{ marginLeft: '70px' }}>
                  选择文件
                </Button>
              </Row>
              <Row style={{ height: '40px', textAlign: 'center' }}>
                <Button type="primary">确认导入</Button>
              </Row>
            </Form>
          </Modal>

          {/* 公积金账单下载 弹框   */}
          <Modal {...ModelLayout12}>
            {selectedRows.map(value => (
              <Row style={{ marginBottom: 20 }}>
                <Col span={7}>
                  <span style={{ fontWeight: 'bold' }}>账单年月</span>：{value.billYm}
                </Col>
                <Col span={9}>
                  <span style={{ fontWeight: 'bold' }}>金额</span>：{value.payAmo}元
                </Col>
                <Col span={6}>
                  <span style={{ fontWeight: 'bold' }}>包含人数</span>：{value.perNum}人
                </Col>
              </Row>
            ))}
            <Row style={{ height: '40px', justifyContent: 'center' }}>
              <Button type="primary" onClick={this.downFile}>
                确认下载
              </Button>
            </Row>
          </Modal>

          {/* 公合并预览 弹框   */}
          <Modal {...ModelLayout14}>
            {selectedRows.map(value => (
              <Row style={{ display: 'flex', justifyContent: 'space-around', marginBottom: 20 }}>
                <Col>
                  <span style={{ fontWeight: 'bold' }}>账单年月</span>：{value.billYm}
                </Col>
                <Col>
                  <span style={{ fontWeight: 'bold' }}>金额</span>：{value.payAmo}元
                </Col>
                <Col>
                  <span style={{ fontWeight: 'bold' }}>包含人数</span>：{value.perNum}人
                </Col>
              </Row>
            ))}

            <Row style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
              <Col>
                <span style={{ fontWeight: 'bold' }}>金额总计</span>：{this.getTotalPrice()}元
              </Col>
            </Row>
            <Row style={{ height: '40px', textAlign: 'center', marginTop: 20 }}>
              <Button type="primary" onClick={this.downFileArr}>
                确认下载
              </Button>
            </Row>
          </Modal>

          <CreateBillModal
            title="生成账单"
            visible={billModalVisible}
            confirmLoading={confirmLoading}
            onOk={this.handleBillOk}
            onCancel={this.handleBillCancel}
            type="2" // 1：社保 2：公积金
            footerVisible={footerVisible}
            nextClick={this.nextClick}
          />
          <Modal
            title="标记已支付"
            visible={markPaidFlag}
            onOk={this.markPaid}
            onCancel={this.closeMarkPaidFlag}
            width={800}
            destroyOnClose
          >
            <Table
              bordered
              dataSource={paidData}
              columns={columnsPaid}
              rowKey="billId"
              pagination={false}
            />
          </Modal>
          {/* <Modal
            title={Number(billType) === 1 ? '生成账单' : '更新账单'}
            footer={null}
            closable={false}
            visible={progressVisible}
            onCancel={this.closeModal}
          >
            <div style={{ textAlign: 'center' }}>
              <div>
                <Progress
                  percent={progressPercent}
                  format={percent => `${percent}%`}
                  style={{ paddingRight: 24, marginBottom: 20 }}
                />
                <Button onClick={this.closeModal}>关闭</Button>
              </div>
            </div>
          </Modal> */}
          <Modal
            title="更新账单"
            footer={null}
            closable={false}
            visible={showProgress}
            afterClose={this.afterClose}
          >
            <div style={{ textAlign: 'center' }}>
              <div>
                <Progress
                  percent={progressPercent}
                  format={percent => `${percent}%`}
                  style={{ paddingRight: 24, marginBottom: 20 }}
                />
              </div>
            </div>
          </Modal>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default BasicList;
